import {
   Bird,
   Book,
   Bot,
   Code2,
   CornerDownLeft,
   LifeBuoy,
   Mic,
   Paperclip,
   Rabbit,
   Settings,
   Settings2,
   Share,
   SquareTerminal,
   SquareUser,
   Triangle,
   Turtle,
} from "lucide-react"

import { Badge } from "~/registry/miami/ui/badge"
import { Button } from "~/registry/miami/ui/button"
import {
   Drawer,
   DrawerContent,
   DrawerDescription,
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
} from "~/registry/miami/ui/drawer"
import { Input } from "~/registry/miami/ui/input"
import { Label } from "~/registry/miami/ui/label"
import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
} from "~/registry/miami/ui/select"
import { Textarea } from "~/registry/miami/ui/textarea"
import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
} from "~/registry/miami/ui/tooltip"

export const description =
   "An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages."

export const iframeHeight = "720px"

export const containerClassName = "w-full h-full"

export default function Dashboard() {
   return (
      <div className="grid h-screen w-full pl-[53px]">
         <aside className="inset-y fixed  left-0 z-20 flex h-full flex-col border-r">
            <div className="border-b p-2">
               <Button variant="outline" size="icon" aria-label="Home">
                  <Triangle className="fill-foreground size-5" />
               </Button>
            </div>
            <nav className="grid gap-1 p-2">
               <Tooltip>
                  <TooltipTrigger asChild>
                     <Button
                        variant="ghost"
                        size="icon"
                        className="bg-muted rounded-lg"
                        aria-label="Playground"
                     >
                        <SquareTerminal className="size-5" />
                     </Button>
                  </TooltipTrigger>
                  <TooltipContent side="right" sideOffset={5}>
                     Playground
                  </TooltipContent>
               </Tooltip>
               <Tooltip>
                  <TooltipTrigger asChild>
                     <Button
                        variant="ghost"
                        size="icon"
                        className="rounded-lg"
                        aria-label="Models"
                     >
                        <Bot className="size-5" />
                     </Button>
                  </TooltipTrigger>
                  <TooltipContent side="right" sideOffset={5}>
                     Models
                  </TooltipContent>
               </Tooltip>
               <Tooltip>
                  <TooltipTrigger asChild>
                     <Button
                        variant="ghost"
                        size="icon"
                        className="rounded-lg"
                        aria-label="API"
                     >
                        <Code2 className="size-5" />
                     </Button>
                  </TooltipTrigger>
                  <TooltipContent side="right" sideOffset={5}>
                     API
                  </TooltipContent>
               </Tooltip>
               <Tooltip>
                  <TooltipTrigger asChild>
                     <Button
                        variant="ghost"
                        size="icon"
                        className="rounded-lg"
                        aria-label="Documentation"
                     >
                        <Book className="size-5" />
                     </Button>
                  </TooltipTrigger>
                  <TooltipContent side="right" sideOffset={5}>
                     Documentation
                  </TooltipContent>
               </Tooltip>
               <Tooltip>
                  <TooltipTrigger asChild>
                     <Button
                        variant="ghost"
                        size="icon"
                        className="rounded-lg"
                        aria-label="Settings"
                     >
                        <Settings2 className="size-5" />
                     </Button>
                  </TooltipTrigger>
                  <TooltipContent side="right" sideOffset={5}>
                     Settings
                  </TooltipContent>
               </Tooltip>
            </nav>
            <nav className="mt-auto grid gap-1 p-2">
               <Tooltip>
                  <TooltipTrigger asChild>
                     <Button
                        variant="ghost"
                        size="icon"
                        className="mt-auto rounded-lg"
                        aria-label="Help"
                     >
                        <LifeBuoy className="size-5" />
                     </Button>
                  </TooltipTrigger>
                  <TooltipContent side="right" sideOffset={5}>
                     Help
                  </TooltipContent>
               </Tooltip>
               <Tooltip>
                  <TooltipTrigger asChild>
                     <Button
                        variant="ghost"
                        size="icon"
                        className="mt-auto rounded-lg"
                        aria-label="Account"
                     >
                        <SquareUser className="size-5" />
                     </Button>
                  </TooltipTrigger>
                  <TooltipContent side="right" sideOffset={5}>
                     Account
                  </TooltipContent>
               </Tooltip>
            </nav>
         </aside>
         <div className="flex flex-col">
            <header className="bg-background sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b px-4">
               <h1 className="text-xl font-semibold">Playground</h1>
               <Drawer>
                  <DrawerTrigger asChild>
                     <Button variant="ghost" size="icon" className="md:hidden">
                        <Settings className="size-4" />
                        <span className="sr-only">Settings</span>
                     </Button>
                  </DrawerTrigger>
                  <DrawerContent className="max-h-[80vh]">
                     <DrawerHeader>
                        <DrawerTitle>Configuration</DrawerTitle>
                        <DrawerDescription>
                           Configure the settings for the model and messages.
                        </DrawerDescription>
                     </DrawerHeader>
                     <form className="grid w-full items-start gap-6 overflow-auto p-4 pt-0">
                        <fieldset className="grid gap-6 rounded-lg border p-4">
                           <legend className="-ml-1 px-1 text-sm font-medium">
                              Settings
                           </legend>
                           <div className="grid gap-3">
                              <Label htmlFor="model">Model</Label>
                              <Select>
                                 <SelectTrigger
                                    id="model"
                                    className="items-start [&_[data-description]]:hidden"
                                 >
                                    <SelectValue placeholder="Select a model" />
                                 </SelectTrigger>
                                 <SelectContent>
                                    <SelectItem value="genesis">
                                       <div className="text-muted-foreground flex items-start gap-3">
                                          <Rabbit className="size-5" />
                                          <div className="grid gap-0.5">
                                             <p>
                                                Neural{" "}
                                                <span className="text-foreground font-medium">
                                                   Genesis
                                                </span>
                                             </p>
                                             <p
                                                className="text-xs"
                                                data-description
                                             >
                                                Our fastest model for general
                                                use cases.
                                             </p>
                                          </div>
                                       </div>
                                    </SelectItem>
                                    <SelectItem value="explorer">
                                       <div className="text-muted-foreground flex items-start gap-3">
                                          <Bird className="size-5" />
                                          <div className="grid gap-0.5">
                                             <p>
                                                Neural{" "}
                                                <span className="text-foreground font-medium">
                                                   Explorer
                                                </span>
                                             </p>
                                             <p
                                                className="text-xs"
                                                data-description
                                             >
                                                Performance and speed for
                                                efficiency.
                                             </p>
                                          </div>
                                       </div>
                                    </SelectItem>
                                    <SelectItem value="quantum">
                                       <div className="text-muted-foreground flex items-start gap-3">
                                          <Turtle className="size-5" />
                                          <div className="grid gap-0.5">
                                             <p>
                                                Neural{" "}
                                                <span className="text-foreground font-medium">
                                                   Quantum
                                                </span>
                                             </p>
                                             <p
                                                className="text-xs"
                                                data-description
                                             >
                                                The most powerful model for
                                                complex computations.
                                             </p>
                                          </div>
                                       </div>
                                    </SelectItem>
                                 </SelectContent>
                              </Select>
                           </div>
                           <div className="grid gap-3">
                              <Label htmlFor="temperature">Temperature</Label>
                              <Input
                                 id="temperature"
                                 type="number"
                                 placeholder="0.4"
                              />
                           </div>
                           <div className="grid gap-3">
                              <Label htmlFor="top-p">Top P</Label>
                              <Input
                                 id="top-p"
                                 type="number"
                                 placeholder="0.7"
                              />
                           </div>
                           <div className="grid gap-3">
                              <Label htmlFor="top-k">Top K</Label>
                              <Input
                                 id="top-k"
                                 type="number"
                                 placeholder="0.0"
                              />
                           </div>
                        </fieldset>
                        <fieldset className="grid gap-6 rounded-lg border p-4">
                           <legend className="-ml-1 px-1 text-sm font-medium">
                              Messages
                           </legend>
                           <div className="grid gap-3">
                              <Label htmlFor="role">Role</Label>
                              <Select defaultValue="system">
                                 <SelectTrigger>
                                    <SelectValue placeholder="Select a role" />
                                 </SelectTrigger>
                                 <SelectContent>
                                    <SelectItem value="system">
                                       System
                                    </SelectItem>
                                    <SelectItem value="user">User</SelectItem>
                                    <SelectItem value="assistant">
                                       Assistant
                                    </SelectItem>
                                 </SelectContent>
                              </Select>
                           </div>
                           <div className="grid gap-3">
                              <Label htmlFor="content">Content</Label>
                              <Textarea
                                 id="content"
                                 placeholder="You are a..."
                              />
                           </div>
                        </fieldset>
                     </form>
                  </DrawerContent>
               </Drawer>
               <Button
                  variant="outline"
                  size="sm"
                  className="ml-auto gap-1.5 text-sm"
               >
                  <Share className="size-3.5" />
                  Share
               </Button>
            </header>
            <main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
               <div
                  className="relative hidden flex-col items-start gap-8 md:flex"
                  x-chunk="dashboard-03-chunk-0"
               >
                  <form className="grid w-full items-start gap-6">
                     <fieldset className="grid gap-6 rounded-lg border p-4">
                        <legend className="-ml-1 px-1 text-sm font-medium">
                           Settings
                        </legend>
                        <div className="grid gap-3">
                           <Label htmlFor="model">Model</Label>
                           <Select>
                              <SelectTrigger
                                 id="model"
                                 className="items-start [&_[data-description]]:hidden"
                              >
                                 <SelectValue placeholder="Select a model" />
                              </SelectTrigger>
                              <SelectContent>
                                 <SelectItem value="genesis">
                                    <div className="text-muted-foreground flex items-start gap-3">
                                       <Rabbit className="size-5" />
                                       <div className="grid gap-0.5">
                                          <p>
                                             Neural{" "}
                                             <span className="text-foreground font-medium">
                                                Genesis
                                             </span>
                                          </p>
                                          <p
                                             className="text-xs"
                                             data-description
                                          >
                                             Our fastest model for general use
                                             cases.
                                          </p>
                                       </div>
                                    </div>
                                 </SelectItem>
                                 <SelectItem value="explorer">
                                    <div className="text-muted-foreground flex items-start gap-3">
                                       <Bird className="size-5" />
                                       <div className="grid gap-0.5">
                                          <p>
                                             Neural{" "}
                                             <span className="text-foreground font-medium">
                                                Explorer
                                             </span>
                                          </p>
                                          <p
                                             className="text-xs"
                                             data-description
                                          >
                                             Performance and speed for
                                             efficiency.
                                          </p>
                                       </div>
                                    </div>
                                 </SelectItem>
                                 <SelectItem value="quantum">
                                    <div className="text-muted-foreground flex items-start gap-3">
                                       <Turtle className="size-5" />
                                       <div className="grid gap-0.5">
                                          <p>
                                             Neural{" "}
                                             <span className="text-foreground font-medium">
                                                Quantum
                                             </span>
                                          </p>
                                          <p
                                             className="text-xs"
                                             data-description
                                          >
                                             The most powerful model for complex
                                             computations.
                                          </p>
                                       </div>
                                    </div>
                                 </SelectItem>
                              </SelectContent>
                           </Select>
                        </div>
                        <div className="grid gap-3">
                           <Label htmlFor="temperature">Temperature</Label>
                           <Input
                              id="temperature"
                              type="number"
                              placeholder="0.4"
                           />
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                           <div className="grid gap-3">
                              <Label htmlFor="top-p">Top P</Label>
                              <Input
                                 id="top-p"
                                 type="number"
                                 placeholder="0.7"
                              />
                           </div>
                           <div className="grid gap-3">
                              <Label htmlFor="top-k">Top K</Label>
                              <Input
                                 id="top-k"
                                 type="number"
                                 placeholder="0.0"
                              />
                           </div>
                        </div>
                     </fieldset>
                     <fieldset className="grid gap-6 rounded-lg border p-4">
                        <legend className="-ml-1 px-1 text-sm font-medium">
                           Messages
                        </legend>
                        <div className="grid gap-3">
                           <Label htmlFor="role">Role</Label>
                           <Select defaultValue="system">
                              <SelectTrigger>
                                 <SelectValue placeholder="Select a role" />
                              </SelectTrigger>
                              <SelectContent>
                                 <SelectItem value="system">System</SelectItem>
                                 <SelectItem value="user">User</SelectItem>
                                 <SelectItem value="assistant">
                                    Assistant
                                 </SelectItem>
                              </SelectContent>
                           </Select>
                        </div>
                        <div className="grid gap-3">
                           <Label htmlFor="content">Content</Label>
                           <Textarea
                              id="content"
                              placeholder="You are a..."
                              className="min-h-[9.5rem]"
                           />
                        </div>
                     </fieldset>
                  </form>
               </div>
               <div className="bg-muted/50 relative flex h-full min-h-[50vh] flex-col rounded-xl p-4 lg:col-span-2">
                  <Badge variant="outline" className="absolute right-3 top-3">
                     Output
                  </Badge>
                  <div className="flex-1" />
                  <form
                     className="bg-background focus-within:ring-ring relative overflow-hidden rounded-lg border focus-within:ring-1"
                     x-chunk="dashboard-03-chunk-1"
                  >
                     <Label htmlFor="message" className="sr-only">
                        Message
                     </Label>
                     <Textarea
                        id="message"
                        placeholder="Type your message here..."
                        className="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
                     />
                     <div className="flex items-center p-3 pt-0">
                        <Tooltip>
                           <TooltipTrigger asChild>
                              <Button variant="ghost" size="icon">
                                 <Paperclip className="size-4" />
                                 <span className="sr-only">Attach file</span>
                              </Button>
                           </TooltipTrigger>
                           <TooltipContent side="top">
                              Attach File
                           </TooltipContent>
                        </Tooltip>
                        <Tooltip>
                           <TooltipTrigger asChild>
                              <Button variant="ghost" size="icon">
                                 <Mic className="size-4" />
                                 <span className="sr-only">Use Microphone</span>
                              </Button>
                           </TooltipTrigger>
                           <TooltipContent side="top">
                              Use Microphone
                           </TooltipContent>
                        </Tooltip>
                        <Button
                           type="submit"
                           size="sm"
                           className="ml-auto gap-1.5"
                        >
                           Send Message
                           <CornerDownLeft className="size-3.5" />
                        </Button>
                     </div>
                  </form>
               </div>
            </main>
         </div>
      </div>
   )
}
